<template>
	<view class="editAddress">
		<view class="people row">
			<text>收货人</text> <input type="text" v-model="people" />
		</view>
		<view class="phone row">
			<text>手机号</text> <input type="text" v-model="mobile" />
		</view>
		<view class="address row">
			<text>所在地区</text>
			<view @tap="open" style="width: 74%;">
				<input style="width: 100%;" v-model="address" />
			</view>
			<image src="../../static/images/icon/more.png" style="width: 18px;height: 18px;"></image>
		</view>
		<view class="address-xx row">
			<text>详细地址</text> <input type="text" v-model="addr" />
		</view>
		<view class="bc" @click="handleBc">
			保存收货地址
		</view>
		<view class="deleted" @click="handleDel">
			删除收货地址
		</view>
		<addressr :column="column" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel"
			:visible="visible" />
	</view>
</template>

<script>
	var http = require("../../utils/http");
	import addressr from '@/components/heimao-add/heimao-add.vue'
	export default {
		data() {
			return {
				people: "",
				mobile: "",
				addr: "",
				editAddressList: {},
				visible: false,
				maskCloseAble: true,
				address: '',
				column: 3
			}
		},
		components: {
			addressr
		},
		onLoad(option) {
			console.log(option);
			if(option.addrId){
				http.request({
					url: `/p/address/addrInfo/${option.addrId}`,
					method: "get",
					data: {},
					callBack: res => {
						this.editAddressList = res
						this.people = res.receiver
						this.mobile = res.mobile
						this.addr = res.addr
						this.address = `${res.province} ${res.city} ${res.area}`
						console.log(this.address);
					}
				})
			}
		},
		methods: {
			open() {
				console.log("132");
				this.visible = true
			},
			confirm(val) {
				console.log("231")
				this.address = `${val.provinceName} ${val.cityName} ${val.areaName}`
				this.visible = false
			},
			cancel() {
				console.log("123");
				this.visible = false
			},
			handleBc() {
				// this.addressAarray=this.address.
				http.request({
					url: `/p/address/updateAddr`,
					method: "put",
					data: {
						addr: this.addr,
						addrId: this.editAddressList.addrId,
						area: this.address.split(" ")[2],
						areaId: this.editAddressList.areaId,
						city: this.address.split(" ")[1],
						cityId: this.editAddressList.cityId,
						mobile: this.mobile,
						province: this.address.split(" ")[0],
						provinceId: this.editAddressList.provinceId,
						receiver: this.people,
						userType: 0,
					},
					callBack: res => {
						this.editAddressList = res
						this.address = `${res.province} ${res.city} ${res.area}`
						setTimeout(() => {
							uni.navigateBack({
								// url:'/pages/delivery-address/delivery-address'
								delta: 1
							})
						}, 100)
					}
				})

			},
			handleDel() {
				uni.showModal({
					content: '确认删除此收获地址吗',
					success: (res) => {
						if (res.confirm) {
							// console.log('户点击确定 ');
							http.request({
								url: `/p/address/deleteAddr/${this.editAddressList.addrId}`,
								method: "DELETE",
								data: {},
								callBack: res => {
									setTimeout(() => {
										uni.navigateBack({
											// url:'/pages/delivery-address/delivery-address'
											delta: 1
										})
									}, 100)
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消 ');
						}
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.editAddress {
		height: 100vh;
		background-color: #fff;
		padding: 10px;

		.row {
			padding: 20px 0;
			border-bottom: 1px solid #ddf;
			display: flex;
			justify-content: space-between;

			text {
				vertical-align: bottom;

				&:nth-child(1) {
					width: 26%;
				}
			}

			input {
				width: 74%;
			}
		}

		.bc,
		.deleted {
			margin: auto;
			margin-top: 20px;
			width: 60%;
			padding: 10px 30px;
			background-color: #f00;
			color: #fff;
			border-radius: 30px;
			text-align: center;
		}

		.deleted {
			color: #f00;
			background-color: #faf4f5;
			border: 1px solid #f00;
		}
	}
</style>